<template>
    <div>
        <Header>
            <div class="middle" slot="middle">
                <div>搜索</div>
            </div>
        </Header>
        <div class="search">
            <van-search
            v-model="value"
            placeholder="请输入商家或美食名称"
            @clear='clear'
            @input='submit'
           
            />
        </div>
        <div class="content" v-if='filterShop.length'>
            <ul>
                <li v-for="(item,index) in filterShop" :key="index">
                    {{item.name}}
                </li>
            </ul>
        </div>
       
        
         
    </div>
</template>

<script>
import Header from 'components/common/HeaderGuide/Header'
import { mapState } from 'vuex';
export default {
    components:{
        Header
    },
    data () {
        return {
            value: '',
            filterShop:[]
        }
    },
    computed:{
        ...mapState({
            shops:state=>state.miste.shops
        })
    },
    methods: {
        submit(){
            //关键词this.value
            console.log(this.value.trim().length===0);
            if (this.value.trim().length===0) {
                this.filterShop=[]
            }else{
                this.filterShop = this.shops.filter((item,index)=>{
                return item.name.includes(this.value)
            })
            }
            
        },
        clear(){
            this.filterShop=[]
            console.log(this.filterShop);
        },
  },
};
</script>

<style lang="less" scoped>


</style>

